<template>
  <view class="container">
    <div class="hd">
      <TopCard 
        :stateColor="bgColors[itemData.governCheckResult]"
        :colors="colors[itemData.governCheckResult]"
        :title="itemData.governInvolveDanger"
        :ff="formatTotal(itemData)"
        :fr="formatDate(itemData)"
        :content="itemData.governCheckTaskName"
        :state="itemData.governCheckResult" />
    </div>

    <view class="bd">
      <Table ref="table" :fetchData="fetchData" :autoFetch="true" class="table">
        <template #default="{ data }">
          <view v-for="(item,index) in data" :key="index">
            <Card 
              :stateColor="bgColorsConform[item.governCheckConform]"
              :colors="colorsConform[item.governCheckConform]"
              @click="fCardClick(item)"
              :data="item"
              v-if="item.governTaskPlanItemId !== activeId" />

            <uni-card v-else>
              <view class="button-box">
                <uni-icons type="closeempty" class="close" size="30"  @click="fClose"></uni-icons>
                <button class="mini-btn" type="primary" size="mini" @click="fGetDetail(item)">查看</button>
                <button :disabled="item.governCheckResult == '已排查' || item.submitStatus == 1 || item.submitStatus == 2" :class="item.governCheckResult == '已排查' || item.submitStatus == 1 || item.submitStatus == 2 ? 'bgGray':'bgOrange'" class="mini-btn" type="primary" size="mini" @click="fFixCheckTaskItemStatus(item.governCheckConform == 2 ? 3 : 2, item)">
                  {{ item.governCheckConform == 2 ? '取消待定' : '待定' }}
                </button>

                <button :disabled="item.submitStatus == 2" :class="item.submitStatus == 2 ? 'bgGray' : 'bgOrange'" class="mini-btn" type="primary" size="mini" @click="fFixCheckTaskItemStatus(0, item)">符合</button>

                <button :disabled="item.submitStatus == 2" :class="item.submitStatus == 2 ? 'bgGray' : 'bgOrange'" class="mini-btn" type="primary" size="mini" @click="fFixCheckTaskItemStatus(1, item)">不符合</button>
              </view>
            </uni-card>
          </view>
        </template>
      </Table>
    </view>
  </view>
</template>

<script>
import { apis as APIS } from "@/api/zxjc/zxjcrw.js";
import Card from "./components/Card";
import TopCard from "@/components/Card.vue";
import Table from "@/components/uniList.vue";

export default {
  data() {
    return {
      type: null,
      list: [],
      itemData: {},
      activeId: '',
      bgColors: {
        待排查: "#f8f0eb",
        进行中: "#e2f0d9",
        已排查: "#fceced",
        // 已超时: "#ff8888",
      },
      colors: {
        待排查: "#c55a11",
        进行中: "#00b050",
        已排查: "#f00",
        // 已超时: "#333",
      },
      bgColorsConform: {
        0: "#f8f0eb",
        1: "#fceced",
        2: "#e2f0d9",
      },
      colorsConform: {
        0: "#c55a11",
        1: "#f00",
        2: "#00b050",
      }
    }
  },
  components: {
    Card,
    TopCard,
    Table
  },
  onLoad(option) {
    this.type = option.type
    this.itemData = JSON.parse(decodeURIComponent(option.data))
  },
  onShow() {
    // this.fGetCheckTaskItemList()
  },
  methods: {
    fGetCheckTaskItemList(){
      let data = {
        type: this.type,
        governTaskPlanId: this.itemData.governTaskPlanId
      }
      APIS.checkTaskItemList(data).then(res => {
        this.list = res.rows
      })
    },
    fCardClick(item){
      this.activeId = item.governTaskPlanItemId
    },
    fClose(){
      this.activeId = ''
    },
    fGetDetail(item){
      uni.navigateTo({
        url: `/pages/zxjc/jcrw/detail?id=${item.governTaskPlanItemId}`
      })
    },
    fFixCheckTaskItemStatus(type, item){
      if(type === 1){  // 不符合
        let { governTaskPlanId, governCheckTaskItemId, governCheckTaskId, governCheckName, governCheckContent, governCheckBasis, governCheckWay, governApplicablePlace, governTaskPlanItemId } = item
        let data = {
          governTaskPlanId,
          governCheckTaskItemId,
          governCheckTaskId,
          governCheckName,
          governCheckContent,
          governCheckBasis,
          governCheckWay,
          governApplicablePlace,
          governTaskPlanItemId,
          isAdd: true
        }
        uni.navigateTo({
          url: `/pages/zxjc/yhgl/index?row=${decodeURIComponent(JSON.stringify(data))}`
        })
      }else{
        let data = {
          governTaskPlanItemId: item.governTaskPlanItemId,
          governCheckConform: type  // 0符合 1不符合 2待定中  默认null
        }
        APIS.fixCheckTaskItemStatus(data).then(res => {
          if(res.code === 200){
            setTimeout(() => {
              uni.showToast({
                title: '操作成功！',
                icon: 'success',
                duration: 2000
              })
            }, 500);
            this.fClose()
            this.getList() 
          }
        })
      }
    },
    formatDate(item) {
      return item.governTaskStartTime + " 至 " + item.governTaskEndTime;
    },
    formatTotal(item) {
      return item.completeCount + "/" + (item.unCompleteCount + item.completeCount);
    },
    formatList(rows) {
      return rows.map((item) => {
        return {
          ...item
        };
      })
    },
    fetchData(pageForm, done){
      APIS.checkTaskItemList({
        type: this.type,
        governTaskPlanId: this.itemData.governTaskPlanId,
        pageNum: pageForm.page,
        pageSize: pageForm.size
      }).then((res) => {
        if (this.formatList) {
          res.rows = this.formatList(res.rows || res.data) || res.rows || res.data;
        }
        done({
          list: res.rows || res.data,
          total: res.total,
        });
        return res.rows || res.data;
      });
    },
    getList(){  // 刷新组件
      if (this.$refs.table) {
        return this.$refs.table.refresh();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.hd{
  width: 100%;
  height: 188rpx;
  position: fixed;
  top: 70rpx;
  /* #ifdef APP-PLUS */
  top: calc(var(--top-window-height) + 0px);
  /* #endif */
  -webkit-overflow-scroll:touch;
  left: 0;
  z-index: 888;

  .card{
    background: #efefef;
    
    &-content{
      color: #000 !important;
    }
  }
  
}

.bd{
  padding-top: 202rpx;
  padding: 208rpx 14upx 20upx 14upx;

  .button-box {
    position: relative;
    // display: flex;
    padding-right: 20rpx;

    .bgOrange{
      background: #e6a23c;
    }
    .bgGray{
      color: #999;
      background: #e1e1e1;
      &::after{
        border-color: #e1e1e1;
      }
    }

    .mini-btn {
      width: 140rpx;
      margin: 0 5upx;
      padding: 0 !important;
      // font-size: 24upx;
    }

    .close {
      position: absolute;
      top: -35rpx;
      right: -24rpx;
      color: skyblue !important;
    }
  }
  :deep .uni-card .uni-card__content {
    padding: 40rpx 10rpx !important;
    line-height: inherit;
  }
}

:deep .uni-card{
  margin: 15rpx 2rpx !important;
}
</style>